<template>
	<div class="container-login">
		<div class="content">
			<div class="top">
				<div class="header">
					<img alt="logo" class="logo" src="../../assets/vue-antd-logo.png" />
					<span class="title">{{systemName}}</span>
				</div>
				<div class="desc">Ant Design 最具影响力的 Web 设计规范</div>
			</div>

			<div class="login">
				<a-form id="components-form-normal-login" :form="form" class="login-form" @submit="handleSubmit">
					<a-form-item>
						<a-input size="large" placeholder="用户名" v-decorator="['loginName',{ rules: [{ required: true, message: '请输入用户名!' }] },]">
							<a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
						</a-input>
					</a-form-item>
					<a-form-item>
						<a-input size="large" placeholder="密码" v-decorator="['password',{ rules: [{ required: true, message: '请输入密码!' }] },]" type="password">
							<a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
						</a-input>
					</a-form-item>
					<div>
						<a-checkbox v-decorator="['remember',{valuePropName: 'checked',initialValue: true,},]">
							记住我
						</a-checkbox>
						<a style="float: right">忘记密码</a>

					</div>
					<a-form-item>
						<a-button size="large" style="margin-top: 1.5rem;" type="primary" html-type="submit" class="login-form-button">
							登录
						</a-button>
					
					</a-form-item>
					<div>
						其他登录方式
						<a-icon class="icon" type="alipay-circle"/>
						<a-icon class="icon" type="taobao-circle" />
						<a-icon class="icon" type="weibo-circle" />
						<router-link style="float: right" :to="{ path: '/register' }">注册账户</router-link>
					</div>
				</a-form>
			</div>
			<!-- <router-view class="main"></router-view> -->
		</div>
		<SPFooter :link-list="linkList" :copyright="copyright" />
		<!-- <two-step-captcha
			v-if="requiredLogin"
			:visible="thisVisible"
			@success="loginSuccess"
			@cancel="loginFail"
		></two-step-captcha> -->
	</div>
</template>

<script>
	// import Vue from 'vue'
	import SPFooter from '../../layouts/SPFooter'
	// import { login } from '@/axios/service/loginApi'
	import { mapActions } from 'vuex'

	export default {
		name:'Login',
		
		components: {
			SPFooter,
		},
		data() {
			return {
				thisVisible: false,
				requiredLogin: false,
			}
		},

		beforeCreate() {
			this.form = this.$form.createForm(this, {
				name: 'normal_login'
			});
		},
		computed: {
			systemName() {
				return "Vue Antd SP-Admin"
			},
			linkList() {
				return "http://www.baidu.com"
			},
			copyright() {
				return " 2019 cah 第一次迭代"
			}
		},
		methods: {
			...mapActions(['Login', 'Logout']),
			
			handleSubmit(e) {
				e.preventDefault();
				const {
					form: { validateFields },
					// state,
					Login
				} = this
				
				validateFields((err, values) => {
					if (!err) {
						// window.console.log('Received values of form: ', values);
						var params = {...values};
						//window.console.log('params: ', params);
						// this.loginSuccess("data");
						// let token = Vue.ls.get("Access-Token")
						Login(params).then((data) => {
							window.console.log('data: ', data);
							this.loginSuccess();
						}).catch(err => this.requestFailed(err))
							.finally(() => {
								
							})
							// window.console.log(response,token)
						
						// Vue.axios.get('www.baidu.com').then((response) => {
						// 	window.console.log(response.data)
						// })
					}
				})
			},
			
			loginSuccess(res){// 登录成功
				window.console.log("loginSuccess",res)
				this.$router.push({ path: '/home/helloWorld' }, () => {
				})
				
			},
			requestFailed(res){// 登录成功
				window.console.log(res)
				this.$notification.error({
					message: '错误',
					description: res  //${timeFix()}
				})
			},
		},
	};
</script>
<style lang="less" scoped>
	.container-login {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow: auto;
		background: #f0f2f5 url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg') no-repeat center 110px;
		background-size: 100%;

		.content {
			padding: 32px 0;
			flex: 1;

			@media (min-width: 768px) {
				padding: 112px 0 24px;
			}

			.top {
				text-align: center;

				.header {
					height: 44px;
					line-height: 44px;

					a {
						text-decoration: none;
					}

					.logo {
						height: 44px;
						vertical-align: top;
						margin-right: 16px;
					}

					.title {
						font-size: 33px;
						color: rgba(0, 0, 0, .85);
						font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
						font-weight: 600;
						position: relative;
						top: 2px;
					}
				}

				.desc {
					font-size: 14px;
					color: rgba(0, 0, 0, .45);
					margin-top: 12px;
					margin-bottom: 40px;
				}
			}
		}

		.login {
			width: 368px;
			margin: 0 auto;

			@media screen and (max-width: 576px) {
				width: 95%;
			}

			@media screen and (max-width: 320px) {
				.captcha-button {
					font-size: 14px;
				}
			}

			.icon {
				font-size: 24px;
				color: rgba(0, 0, 0, 0.2);
				margin-left: 16px;
				vertical-align: middle;
				cursor: pointer;
				transition: color 0.3s;

				&:hover {
					color: #1890ff;
				}
			}

			.login-form-forgot {
				float: right;
			}
			.login-form-button{
				width: 100%;
			}
		}
	}
</style>
